<template>
  <div class="search-history-container">
    <!-- 标题 -->
    <van-cell title="历史记录">
      <div 
        v-if="isDelete" 
        @click="isDelete = false"
      >
        <van-icon name="delete-o" />
      </div>
      <div v-else>
        <!-- 
          prop数据如果是引用类型（数组、对象）可以修改，
          注意这个修改指的是：
           user.name = 'Jack'
           arr.push(123)
           arr.splice(0,1)
          但是任何prop数据都不能重新赋值： xxx = xxx
          如果想要让prop数据 = 新的数据，让父组件自己修改。
         -->
        <span
          @click="clearSearchHistory"
        >全部删除</span>
        &nbsp;&nbsp;
        <span @click="isDelete = true">完成</span>
      </div>
    </van-cell>
    <!-- 历史记录 -->
    <van-cell 
      v-for="(history,index) in searchHistoryList"
      :key="index"
      @click="onDelete(history,index)"
    >
      <div slot="title">{{history}}</div>
      <van-icon 
        name="close"
        v-if="!isDelete"
      />
    </van-cell>
  </div>
</template>

<script>
export default {
  name: "SearchHistory",
  components: {},
  props: {
    searchHistoryList:{
      type: Array,
      required: true,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      // 是否点击了删除图标
      isDelete: true
    };
  },
  computed: {},
  watch: {},
  methods: {
    onDelete(history,index) {
      // 如果是删除状态,则执行删除操作
      if (!this.isDelete) {
        this.$emit("onDelete",index);
        return 
      } 

      // 不是删除状态，点击了的话，要进行搜索
      this.$emit("onSearch",history);
    },
    // 全部删除
    clearSearchHistory() {
      this.$emit("clearSearchHistory",[]);
    }
  },
  created() {},
  mounted() {},
};
</script>

<style lang='less' scoped>
//@import url(); 引入公共css类
</style>